import { LinkOutlined, UploadOutlined } from "@ant-design/icons";
import React from "react";
import style from "./index.module.scss";
interface IUploadBase {
  videoUrl: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const UploadBase: React.FC<IUploadBase> = ({ videoUrl, onChange }) => {
  return (
    <div className={ style['wrapper']}>
      <div className={style["container"]}>
        <input
          style={{ display: "none" }}
          type="file"
          id="videoInput"
          name="uploadVideo"
          accept="video/*"
          onChange={(e) => onChange(e)}
          multiple
        />
        <label htmlFor="videoInput" className={style["btn"]}>
          <span>
            <UploadOutlined />
          </span>
          <span>upload</span>
        </label>
      </div>
      {videoUrl && (
        <div className={style["fileOption"]}>
          <span>
            <LinkOutlined />
          </span>
          <span>{videoUrl.split("/").pop()}</span>
        </div>
      )}
    </div>
  );
};
export default UploadBase;
